<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">

    <title>开门统计表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="main.css">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>

    <script src="template-web.js"></script>
    <script src="http.js"></script>
    <script src="HDate.js"></script>
    <script src="Lockr.js"></script>

    <script id="tpl" type="text/html">
        <%for(var i=0;i<list.length;i++) {%>
            <div class='row item'>
                <!-- <div class="col-1 text-center"><%=i+1%></div> -->
                <div class="col-3 text-center">
                    <%=list[i].name%>
                </div>
                <div class="col-3 text-center">
                    <%=list[i].busy[0]%>
                </div>
                <div class="col-3 text-center">
                    <%=list[i].busy[1]%>
                </div>
                <div class="col-3 text-center">
                    <%=list[i].busy[2]%>
                </div>
            </div>
            <%}%>
                <%if (list.length>0) {%>
                    <%for(var i=list.length;i<7;i++) {%>
                        <div class="row blank">
                            <div class="col-12"></div>
                        </div>
                        <%}%>
                            <%} else {%>
                                <div class='row empty'>
                                    <div class="col-12">
                                        <%=message%>
                                    </div>
                                </div>
                                <%}%>

    </script>

    <script id="building-select-tpl" type="text/html">
        <% for (var i in items) {%>
            <a class="dropdown-item" href="#" onclick="updateBuilding('<%=items[i]%>')">
                <%=items[i]%>
            </a>
            <%}%>
    </script>
    <script type="text/javascript">
        const mainTpl = template.compile($('#tpl').text());
        const buildingTpl = template.compile($('#building-select-tpl').text());
        const dateVal = new HDate();
        const timeOfDay = 24 * 60 * 60;
        var mainData = [];
        var selectedBuilding = null;
        var startDate;
        var refreshLock = false;

        //重置日期响应函数
        function resetDate() {
            dateVal.reset();
            updateDate();
        }

        //增减日期响应函数
        function updateDate(value) {
            dateVal.addDays(value);
            $('#curdate').text(dateVal.toString());
            let cur = dateVal.getUnixTimeStamp();
            if (cur >= startDate) {
                $('#date-detail').text("第" + (parseInt((cur - startDate) / timeOfDay / 7) + 1) + "周 " + dateVal.getWeekStr());
            } else {
                $('#date-detail').text("第" + parseInt((cur - startDate) / timeOfDay / 7 - 1) + "周 " + dateVal.getWeekStr());
            }
            refreshList();
        }

        //更新教学楼选择响应函数
        function updateBuilding(value) {
            selectedBuilding = value;
            $('#buildingBtnGroup').text(value);
            Lockr.set("selected_building", value);
            refreshList();
        }

        //获取并应用数据到主列表中
        function refreshList() {
            if (refreshLock > 0)
                return;
            $('#busyroom').hide('fast');
            httpGet("/index.php/apis/v1/busy_room", {
                date: dateVal.toString(),
                building: selectedBuilding === '所有楼' ? undefined : selectedBuilding
            }, data => {
                $('#busyroom').show("fast");
                if (data.isSuccess) {
                    mainData = data.data;
                    $('#busyroom #content .row:not(:first-child)').remove();
                    $('#busyroom #content').append(mainTpl({
                        list: mainData,
                        message: "当日没有任何课程"
                    }));
                    $('#busyroom #title').text(dateVal.toString() + " 日开门统计表");
                } else {
                    mainData = [];
                    $('#busyroom #content .row:not(:first-child)').remove();
                    $('#busyroom #content').append(mainTpl({
                        list: mainData,
                        message: data.errmsg ? data.errmsg : "获取统计信息失败"
                    }));
                    $('#busyroom #title').text(dateVal.toString() + " 日开门统计表");
                }
            })
        }

        //刷新开始日期,并更新
        function refreshStartDate() {
            startDate = Lockr.get('start_date');
            updateDate(0);
            httpGet("/index.php/apis/v1/start_date", {}, data => {
                if (data.isSuccess) {
                    refreshLock--;
                    startDate = parseInt(new Date(data.data[0]).valueOf() / 1000);
                    Lockr.set('start_date', startDate);
                    updateDate(0);
                }
            });
        }

        function refreshBuilding() {
            updateBuilding(Lockr.get("selected_building", '所有楼'));
            httpGet("/index.php/apis/v1/building_names", {}, data => {
                if (data.isSuccess) {
                    $('#buildingDropDown').html(buildingTpl({
                        items: ['所有楼'].concat(data.data)
                    }));
                }
            });
        }

        $(function () {
            refreshLock = 1;
            refreshBuilding();
            refreshStartDate();
            var mouseStart;
            $("#busyroom").on('touchstart', function (e) {
                mouseStart = e.originalEvent.changedTouches[0];
            });
            $("#busyroom").on('touchend', function (e) {
                let p = e.originalEvent.changedTouches[0];
                if (p.pageX - mouseStart.pageX > 120) {
                    updateDate(-1);
                } else if (p.pageX - mouseStart.pageX < -120) {
                    updateDate(1);
                }
            });
        });
    </script>

</head>

<body>
    <div class="container">
        <div class='row' id="top-bar">
            <div class="btn-group btn-group" style="width: 100%;" role="group" aria-label="Basic example">
                <button type="button" class="btn col-1 col-md-2 btn-light" onclick="updateDate(-7)">&lt;&lt;</button>
                <button type="button" class="btn col-1 col-md-2 btn-light" onclick="updateDate(-1)">&lt;</button>
                <button type="button" class="btn col-8 col-md-4 btn-light font-weight-bold" onclick="resetDate()"
                    id="curdate"></button>
                <button type="button" class="btn col-1 col-md-2 btn-light" onclick="updateDate(1)">&gt;</button>
                <button type="button" class="btn col-1 col-md-2 btn-light" onclick="updateDate(7)">&gt;&gt;</button>
            </div>
        </div>

        <div class="row bg-light" id="second-bar">
            <div class="col-6 btn" id="date-detail">第 周 星期 </div>
            <button id="buildingBtnGroup" type="button" class="btn btn-light dropdown-toggle col-6"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" aria-labelledby="buildingBtnGroup" id="buildingDropDown"></div>
        </div>

        <div class='row'>
            <div class="col-12" id="busyroom" style="display: none">
                <div id="title" class=" text-center" style="width:100%">日开门统计表
                </div>
                <div id="content" class="container" style="width:100%">
                    <div class='row header'>
                        <!-- <div class="col-1 text-center">序</div> -->
                        <div class="col-3 text-center">课室</div>
                        <div class="col-3 text-center">上午</div>
                        <div class="col-3 text-center">下午</div>
                        <div class="col-3 text-center">晚上</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>